<script setup lang="ts">
import MY_APPROVE from '/@/assets/image/icon/my-approve.png';
import MY_WORK_ORDER from '/@/assets/image/icon/my-work-order.png';
import MY_APPOINTMENT from '/@/assets/image/icon/my-appointment.png';
import { navigateTo } from '@tarojs/taro';
</script>
<template>
  <nut-row :gutter="10">
    <nut-col :span="8">
      <view
        class="my-staff-manage__item"
        @click="navigateTo({ url: '/pages/my-approve/list/index' })"
      >
        <image class="my-staff-manage__item__image" :src="MY_APPROVE" />
        <view class="my-staff-manage__item__content">
          <view class="my-staff-manage__item__title">我的审批</view>
          <view>流程审批处理</view>
        </view>
      </view>
    </nut-col>
    <nut-col :span="8">
      <view
        class="my-staff-manage__item"
        @click="navigateTo({ url: '/pages/my/work-order/index' })"
      >
        <image class="my-staff-manage__item__image" :src="MY_WORK_ORDER" />
        <view class="my-staff-manage__item__content">
          <view class="my-staff-manage__item__title">我的工单</view>
          <view>维修运送工单</view>
        </view>
      </view>
    </nut-col>
    <nut-col :span="8">
      <view
        class="my-staff-manage__item"
        @click="navigateTo({ url: '/pages/my/appointment/index' })"
      >
        <image class="my-staff-manage__item__image" :src="MY_APPOINTMENT" />
        <view class="my-staff-manage__item__content">
          <view class="my-staff-manage__item__title">我的预约</view>
          <view>会议/访客预约</view>
        </view>
      </view>
    </nut-col>
  </nut-row>
</template>
<style lang="scss">
.my-staff-manage {
  &__item {
    height: 120px;
    position: relative;

    &__image {
      width: 100%;
      height: 100%;
    }
    &__content {
      position: absolute;
      left: 20px;
      top: 20px;
      font-size: 20px;
      color: #999;
    }
    &__title {
      font-size: 26px;
      font-weight: bold;
      color: #333;
      margin-bottom: 10px;
    }
  }
}
</style>
